<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link href="../Public/css/bootstrap.min.css" rel="stylesheet">
	<script src="../Public/js/jquery-1.11.1.min.js"></script>
	<script src="../Public/js/bootstrap.min.js"></script>
	<style>
		/*重置*/
		*{
			box-sizing: border-box;
			text-size-adjust: none;
			-webkit-text-size-adjust: none;
		}
		html,body,.container{
			padding: 0;
			margin: 0;
			height: 100%
		}
		.container{
			position: relative;
			max-width: 420px;
			min-width: 320px;
			min-height: 400px;
			margin: auto;
		}
		img{
			max-width: 100%;
		}

		/*布局*/
		.container{
			display: flex;
			flex-direction: column;
			/*height: 600px;*/
			border: 1px solid gray;
		}
		.a{
			height: 52px;
			background-color: #a5eaef;
		}
		.btn{
			margin-right: 18px;
			margin-top: 6px;
		}
		.b{
			flex: 1;
		}
		.b1{
			background-color: #e7e7e7;
			height: 412px;
			width: 393px;
			margin: 7px 9px 7px 9px;
			padding-left: 8px;
		}
		.b1>img{
			margin-top: 14px;
			margin-left: 6px;
		}
		/*.u{*/
			/*display: flex;*/
		/*}*/
		/*#u1,#u2,#u3{*/
			/*flex: 1 0.5 auto;*/
			/*width: 414px;*/
		/*}*/
	</style>
</head>
<body>
	<div class="container">
		<div class="a">
			<img src="images/a1.png" style="margin-left: 30px;margin-top: 5px">
			<button  type="button" class="btn btn-success btn pull-right" style="width: 75px;height: 38px;background-color: #45c9a2;font-size: 19.44px;">发送</button>
		</div>
		<div class="b">
			<div class="b1">
				<img src="images/b3.png">
				<img src="images/b1.png">
				<img src="images/b3.png">
				<img src="images/b1.png">
				<img src="images/b3.png">
				<img src="images/b1.png">
				<img src="images/b3.png">
				<img src="images/b1.png">
				<img src="images/b3.png">
			</div>

			<div style="font-size: 18.14px;font-family: 黑体;float: left;margin-top: 15px;margin-left: 10px">主题：</div>
			<div style="border: 1px solid #dfdfdf;width: 335px;height: 39px;font-size: 16.85px;font-family: 黑体;float: left;line-height: 39px;margin-top: 7px">
					主题内容主题内容
			</div>

			<div class="u" style="width: 395px;height: 43px;background-color: #dfdfdf;margin-top: 67px;margin-left: 10px;">
				<div id=u1 style="font-size: 16px;line-height: 43px;float: left;margin-left: 8px;color: #4e4e4e">@</div>
				<div id=u2 style="font-size: 12.96px;line-height: 43px;float: left;color: #4e4e4e">发送对象</div>
				<div  id=u3 style="color: #45c9a2;font-size: 16.85px;line-height: 43px;float: left;margin-left: 23px">小葡萄&nbsp;&nbsp;小元宝&nbsp;&nbsp;葡萄&nbsp;&nbsp;元宝&nbsp;&nbsp;葡萄&nbsp;&nbsp;元宝</div>
			</div>
		</div>
	</div>
</body>
</html>